<template>
  <div v-show="!window.min" :style="style" :class="['explorer-frame',{'explorer-frame-active': window.active}]">
    <div v-drag="drag" :class="['explorer-header',window.max && window.tack ? 'explorer-header-h':'explorer-header-v']" @dblclick="$emit('explorerMax',$event)">
      <icon-show class="explorer-header-btn explorer-header-topIcon" :src="data" @dblclick.native="$emit('explorerClose',$event)" />
      <span class="explorer-header-text" :title="data.info?data.info.componentId:data.name">{{ data.name }}</span>
      <i title="固定" class="explorer-header-btn fas fa-thumbtack" @click="$emit('explorerTack',$event)" />
      <i title="最小化" class="explorer-header-btn fas fa-window-minimize" @click="$emit('explorerMin',$event)" />
      <i title="刷新" class="explorer-header-btn fas fa-sync" @click="refresh($event)" />
      <i :title="window.max?'还原':'最大化'" :class="['explorer-header-btn fas',window.max?'fa-window-restore':'fa-window-maximize']" @click="$emit('explorerMax',$event)" />
      <i title="关闭" class="explorer-header-btn fas fa-window-close" @click="$emit('explorerClose',$event)" />
    </div>
    <div v-if="hackReset" :class="['explorer-content',{'explorer-content-404': is404}]">
      <!-- <iframe v-if="hasResouce" class="explorer-content-iframe" :src="data.info.linkUrl" />
      <component :is="componentId" v-else :component="data.component" :data="data.children" :value="data.data" @explorerOpen="explorerOpen" /> -->
    </div>
    <div class="explorer-footer" />
  </div>
</template>
<script>
import ItemGroup from '@components/ItemGroup.vue'
import component from '@store/component.js'
const router = component.state.component
export default {
  name: 'Explorer',
  components: {
    ItemGroup,
    IconShow: () => import('@components/IconShow.vue'),
    ...router
  },
  directives: {
    drag: {
      bind(el, displacement) {
        el.onmousedown = function(e) {
          let originPosition = { x: e.clientX, y: e.clientY }
          el.onmousemove = function(e) {
            displacement.value({ x: e.clientX - originPosition.x, y: e.clientY - originPosition.y })
            originPosition = { x: e.clientX, y: e.clientY }
          }
          document.onmouseup = function(e) {
            document.onmouseup = null
            el.onmousemove = null
          }
        }
      }
    }
  },
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      ...router,
      hackReset: true,
      defaultStyle: {
        x: 10,
        y: 20,
        w: 400,
        h: 300,
        z: 0,
        tack: false,
        max: false,
        min: false,
        active: false
      }
    }
  },
  computed: {
    // 是否显示404页面
    is404() {
      if (this.isComponent || this.data.component) {
        return !this.componentId
      } else {
        return !this.hasResouce
      }
    },
    // true-内部组件,false-外部链接
    isComponent() {
      return this.data.info &&
        this.data.info.componentFlag &&
        this.data.info.componentFlag.trim() &&
        this.data.info.componentFlag.trim().toLowerCase() === 'true'
    },
    // 是否配置了外部链接地址
    hasResouce() {
      return this.data.info &&
        this.data.info.linkUrl &&
        this.data.info.linkUrl.trim()
    },
    // 内部组件
    componentId() {
      const component = this.data.component || (
        this.data.info &&
        this.data.info.componentId &&
        this.data.info.componentId.trim()
          ? this.data.info.componentId.trim()
          : null
      )
      return component
        ? (this.$data[component] ? component : null)
        : (this.data.children ? ItemGroup : null)
    },
    window() {
      return { ...this.defaultStyle, ...this.data.window }
    },
    style() {
      if (!this.window.win) {
        return this.window.max ? {
          left: '0px',
          top: '0px',
          width: '100%',
          height: '100%',
          zIndex: this.window.z
        } : {
          left: `${this.window.x}px`,
          top: `${this.window.y}px`,
          width: `${this.window.w}px`,
          height: `${this.window.h}px`,
          zIndex: this.window.z
        }
      } else {
        return {}
      }
    }
  },
  methods: {
    drag(displacement) {
      this.$emit('explorerDrag', displacement)
    },
    refresh(event) {
      this.hackReset = false
      this.$nextTick(() => {
        this.hackReset = true
      })
    },
    explorerOpen(item, data, event) {
      this.$emit('explorerOpen', { ...item, data }, event)
    }
  }
}
</script>
<style scoped>
.explorer-frame {
  display: flex;
  flex-direction: column;
  align-items:stretch;
}
.explorer-content {
  flex-grow: 1;
  overflow: auto;
}
.explorer-footer,
.explorer-header {
  flex-shrink: 0;
  flex-basis: 2.15rem;
  display: flex;
  line-height: 2.15rem;
  color: #6e6e6e;
  border-bottom: 1px solid #cccccc;
  background-color: #f9f9f9;
  text-overflow: ellipsis;
  user-select:none;
  padding: 0 .5rem;
  transition:all 0.2s ease;
  -moz-transition:all 0.2s ease; /* Firefox 4 */
  -webkit-transition:all 0.2s ease; /* Safari and Chrome */
  -o-transition:all 0.2s ease; /* Opera */
}
.explorer-footer {
  flex-basis: 2.5rem;
  line-height: 2.5rem;
}
.explorer-header-h {
  opacity: 0;
}
.explorer-header-h *{
  visibility: hidden;
}
.explorer-header-v *{
  visibility: visible;
}
.explorer-header:hover,
.explorer-header-v {
  opacity: 1 !important;
}
.explorer-header:hover *{
  visibility: visible !important;
}
.explorer-header-text {
  flex-grow: 1;
  padding: 0 .2rem;
}
.explorer-header-btn {
  width: 2rem;
  line-height: 2.15rem;
  text-align: center;
  color: #6e6e6e;
  padding: 0 .5rem;
}
.explorer-header-topIcon {
  font-size: 1.4rem;
}
.explorer-frame-active .explorer-header {
  background-color: #f3f3f3;
}
.explorer-frame-active .explorer-header-topIcon {
  font-size: 1.5rem;
}
.explorer-frame-active .explorer-header,
.explorer-frame-active .explorer-header-topIcon,
.explorer-frame-active .explorer-header-btn:hover {
  color: #333;
}
.explorer-content-404 {
  background: url(../../assets/image/404_bk.jpg) no-repeat center center #75787d;
  background-size: cover;
  overflow: hidden;
}
.explorer-content-iframe {
  width: 100%;
  height: 1000px;
}
</style>
